/* View Transition 切换动画 */
/* 只在主题切换时应用（通过 data-theme-transitioning 属性标识） */

/* Root 元素的动画配置 */
html[data-theme-transitioning]::view-transition-old(root),
html[data-theme-transitioning]::view-transition-new(root) {
    animation-duration: 0.4s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* 旧视图：淡出并轻微缩小 */
html[data-theme-transitioning]::view-transition-old(root) {
    animation-name: fade-out;
}

/* 新视图：圆形展开进入（从点击位置） */
html[data-theme-transitioning]::view-transition-new(root) {
    animation-name: circle-expand;
    z-index: 1;
}

/* 圆形展开动画（从点击位置） */
@keyframes circle-expand {
    from {
        clip-path: circle(0% at var(--x, 50%) var(--y, 50%));
        opacity: 0;
        transform: scale(0.96);
    }

    50% {
        opacity: 0.8;
    }

    to {
        clip-path: circle(150% at var(--x, 50%) var(--y, 50%));
        opacity: 1;
        transform: scale(1);
    }
}

/* 淡出动画 */
@keyframes fade-out {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.98);
    }
}